import "./index.css";
import { useState, useEffect, useRef } from "react";
import { wearth,Getlist } from "../../request/api";
import * as echarts from "echarts";
import dayjs from "dayjs";
import RightTop from "../../compontens/page/righttop/RightTop";
import Rightbom from "../../compontens/page/rightbottom/rightbom";
// import Maps from "../../compontens/page/Maps/map";
import Muma from "../../compontens/page/muma/muma";
import Footernav from "../../compontens/page/Footnav/footernav";
function Index() {
  let [weathers, Setweathers] = useState({});
  let list = useRef(null);
  let [option, Setoption] = useState({
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
      icon: "circle",
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "Email",
        type: "line",
        stack: "Total",
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: "Union Ads",
        type: "line",
        stack: "Total",
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: "Video Ads",
        type: "line",
        stack: "Total",
        data: [150, 232, 201, 154, 190, 330, 410],
      },
      {
        name: "Direct",
        type: "line",
        stack: "Total",
        data: [320, 332, 301, 334, 390, 330, 320],
      },
      {
        name: "Search Engine",
        type: "line",
        stack: "Total",
        data: [820, 932, 901, 934, 1290, 1330, 1320],
      },
    ],
  });

  // xAxis
  useEffect(() => {
    var myChart = echarts.init(list.current);
    wearth({
      unescape: 1,
      version: "v63",
      appid: "21258378",
      appsecret: "HWu3PHtM",
    }).then((res) => {
      console.log(res);
      Setweathers(res.data);
    });
    Getlist().then((res) => {
      console.log(res,'哈哈哈哈哈哈6666666');
      option.legend.data = res.data.data[0].data.result[0].legend.data;
      option.series = res.data.data[0].data.result[0].series.map((item) => {
        return {
          ...item,
          showSymbol: false,
          smooth: true,
        };
      });

      let arr = [];
      let time = +new Date();
      for (let i = 0; i < 4; i++) {
        arr.unshift(dayjs(time).format("HH:mm:ss"));
        time -= 2 * 60 * 1000;
      }
      option.xAxis.data = arr;

      Setoption(option);
      myChart.setOption(option);
    });
    window.addEventListener('resize', function() {
      myChart.resize();
    });
  }, [option]);
  return (
    <div className="box">
      <header></header>
      <main>
        <div className="left">
          <div className="weather">
            <div className="title">环境监测1212</div>
            <div className="cont">
              <div className="tably-top">
                <div>
                  {weathers.tem}
                  <span className="she">℃</span>
                </div>
                <div>
                  <div className="zhu"></div>

                  <p className="tom">
                    {weathers.tem2}℃~{weathers.tem1}℃
                  </p>
                </div>
                <div className="you">
                  <div className="roule"></div>
                  <div>{weathers.air_level}</div>
                </div>
              </div>
              <div className="tably-center">
                <div className="a1">
                  <span className="iconfont icon-wendu"></span>体感
                </div>
                <div className="a1">
                  <span className="iconfont icon-fengli"></span>风力
                </div>
                <div className="a1">
                  <span className="iconfont icon-shidu"></span>湿度
                </div>
              </div>
              <div className="tably-bottom">
                <div className="bottom-left">
                  <div className="s1">
                    <span>{weathers.tem}~℃</span>
                    <span>{weathers.tem2}~℃</span>
                  </div>
                  <div className="s1">
                    <span>今天</span>
                    <span>hh</span>
                    <span>{weathers.wea}</span>
                  </div>
                </div>
                <div className="bottom-right">
                  <div className="s1">
                    <span>{weathers.tem}~℃</span>
                    <span>{weathers.tem2}~℃</span>
                  </div>
                  <div className="s1">
                    <span>明天</span>
                    <span>hh</span>
                    <span>{weathers.wea}</span>
                  </div>
                </div>
              </div>
            </div>
            <div className="title1">学生发布情况</div>
            <div className="cont1" ref={list}></div>
          </div>
        </div>
        <div className="center">
          {/* <Maps></Maps> */}
          <Muma></Muma>
          <Footernav></Footernav>
        </div>
        <div className="right">
          <RightTop></RightTop>
          <Rightbom></Rightbom>
        </div>
      </main>
    </div>
  );
}

export default Index;
